"use client";

import { useState, useEffect } from "react";
import { useTheme } from "./theme-provider";
import { Sun, Moon, Monitor } from "lucide-react";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";

interface ThemeToggleProps {
  collapsed?: boolean;
}

export function ThemeToggle({ collapsed = false }: ThemeToggleProps) {
  const { theme, setTheme } = useTheme();
  const [showThemeSelect, setShowThemeSelect] = useState(false);
  const t = useTranslations('Navigation');

  // 切换主题选择下拉菜单显示状态
  const toggleThemeSelect = () => {
    setShowThemeSelect(!showThemeSelect);
  };

  // 点击外部关闭下拉菜单
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement;
      if (!target.closest('.theme-select-container')) {
        setShowThemeSelect(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  // 获取当前主题图标
  const getThemeIcon = () => {
    switch (theme) {
      case "light":
        return <Sun className="h-4 w-4" />;
      case "dark":
        return <Moon className="h-4 w-4" />;
      default:
        return <Monitor className="h-4 w-4" />;
    }
  };

  return (
    <div className="relative theme-select-container cursor-pointer">
      <button
        onClick={toggleThemeSelect}
        className="cursor-pointer border flex items-center justify-center p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors rounded-md"
        title={t('theme')}
      >
        {getThemeIcon()}
      </button>

      {/* 主题选择下拉菜单 */}
      {showThemeSelect && (
        <div
          className="absolute z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg py-1"
          style={{
            width: '120px',
            left: collapsed ? '40px' : '0px',
            bottom: collapsed ? '-18%' : '100%',
            marginBottom: '4px',
            overflow: 'hidden'
          }}
        >
          <div className="flex flex-col ">
            <button
              onClick={() => {
                setTheme('light');
                setShowThemeSelect(false);
              }}
              className={cn(
                "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                theme === 'light' ? "bg-gray-100 dark:bg-gray-800 font-medium" : ""
              )}
            >
              <div className="flex items-center">
                <Sun className="h-4 w-4 mr-2" />
                {t('lightTheme')}
              </div>
            </button>
            <button
              onClick={() => {
                setTheme('dark');
                setShowThemeSelect(false);
              }}
              className={cn(
                "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                theme === 'dark' ? "bg-gray-100 dark:bg-gray-800 font-medium" : ""
              )}
            >
              <div className="flex items-center">
                <Moon className="h-4 w-4 mr-2" />
                {t('darkTheme')}
              </div>
            </button>
            <button
              onClick={() => {
                setTheme('system');
                setShowThemeSelect(false);
              }}
              className={cn(
                "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                theme === 'system' ? "bg-gray-100 dark:bg-gray-800 font-medium" : ""
              )}
            >
              <div className="flex items-center">
                <Monitor className="h-4 w-4 mr-2" />
                {t('systemTheme')}
              </div>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
